<template>
    <div>
        <div class="title">
            <div class="back" @click="$router.back()">
                <span> <img src="../assets/img/fanhuiblack.png" alt=""> </span>
            </div>
            <div class="gamename">资讯详情</div>
            <span @click="showShare = true" style="font-size: 16px;">...</span>
        </div>
        <img referrerPolicy="no-referrer" src="https://s3.sonkwo.com/sonkwopost1669609483906?imageView2/1/w/375/h/125"
            alt="">

        <div class="userinfo" ref="scrollDiv">
            <div style="padding: 0 10px;">
                <div class="userdetail">
                    <div class="imgbox">
                        <img src="	https://www.sonkwo.cn/36799ad46eeb1c08e0cc3c05a1a870a2.png" width="70.4px"
                            height="70.4px" alt="">
                        <img src="../assets/img/photo.jpg" width="44x" height="44px" alt="">
                    </div>
                    <div class="name">
                        <p>杉果娘-Sonkwo<span></span><span>头条作者</span></p>
                    </div>
                    <div class="user">
                        <p>关注</p>
                    </div>
                </div>
                <div class='contentbox' v-if="detailContent">
                    <div v-for="(item, index) in detailContent.content" :key="index">
                        <!-- <h1>杉果感恩节最后三天预告，《怪猎崛起》《骑士精神2》新史低</h1> -->
                        <h1>{{ item.title }} </h1>
                        <!-- <p>杉果感恩节特惠最后三天预告来袭！相比 Steam 秋促来说，部分游戏杉果家券后价格更实惠哦！话不多说咱们直接进入正题吧！</p> -->
                        <p>{{ item.description }}</p>
                        <img referrerPolicy='no-referrer' :src='item.picUrl'>
                        <!-- <p>《绯红结系 终极版》包含游戏本体、数位原声带、数位美术集、追加服装以及付费 DLC，11 月 28 日限时折扣价券后仅需￥95，喜欢动作游戏的玩家不要错过了。</p>
                        <img referrerPolicy="no-referrer"
                            src='https://s3.sonkwo.com/sonkwopost1669609535794?_=1685498400000&imageView2/2/w/720'>
                        <p>B 社游戏全面涨价后，《辐射76》曾经的￥32 史低也永涨为￥41，但杉果感恩特惠闪促价￥24 还是可以冲的。作为一款 B
                            社出品的网络游戏，游戏中流露的压抑氛围和数百种变异生物的存在将核爆后的末日世界展示的淋漓尽致。在这满目疮痍的废土世界，谁又能拒绝成为一名合格的“垃圾佬”呢？ </p>
                        <img referrerPolicy='no-referrer'
                            src='	https://s3.sonkwo.com/sonkwopost1669609550941?_=1685498400000&imageView2/2/w/720'> -->
                    </div>
                </div>


                <div class="fotter">
                    <input type="text" placeholder="来评论吧" v-model="value" @keyup.enter="publish">
                    <van-icon :size="20" name="star" :class="[starLike == true ? 'staractive' : 'like']"
                        @click="starColor" />
                    <van-icon :size="20" name="like" class="like" @click="like"
                        v-if="goodList.indexOf((titleId * 1)) == -1" />
                    <van-icon name="like" :size="20" class="likeactive" v-else @click="unlike" />
                    <van-icon :size="20" name="chat" class="like" @click="toComment" />
                </div>

            </div>
        </div>
        <div class="commentitem" v-for="(item, index) in pageComment" :key="index">
            <div style="padding: 0px 12px;">
                <div class="commentdetail">

                    <div class="userpho">
                        <img src="../assets/img/photo.jpg" alt="" />
                    </div>
                    <div class="userinfo">
                        <div class="name">
                            <p>{{ userName }}</p>
                            <span>{{ item.time }}</span>
                        </div>
                        <div class="content">
                            <p>{{ item.comment }}</p>
                        </div>
                    </div>
                    <div class="goods">
                        <span>
                            <img @click="good" src="../assets/img/good.png" alt="" />
                        </span>
                        <span>0</span>
                    </div>
                    <p @click="delDetail(item.time)" class="cancel">&#10006;</p>
                </div>
            </div>
        </div>
        <div class="bottom" style="height: 60px;"></div>
        <van-share-sheet v-model="showShare" title="分享给你的朋友吧" :options="options" />
        <div class="dialogbox" v-show="showDialog">
            <div class="dialog">
                <div class="top">
                    <p>确认删除评论吗？</p>
                </div>
                <div class="bottom">
                    <div>
                        <p @click="cancel"> 取消</p>
                    </div>
                    <div>
                        <p @click="del"> 确认</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<style lang="scss" scoped>
.dialogbox {
    width: 100%;
    height: 100%;
    background-color: rgba(24, 23, 23, 0.8);
    position: fixed;
    top: 0;
    z-index: 5;
}

.dialog {
    .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;

        div {
            width: 50%;
            text-align: center;
            display: inline-block;
            border: 1px solid #f6f7f8;
            height: 50px;
            line-height: 50px;

            &:nth-child(1) {
                border-radius: 0 0 0 15px;
            }

            &:nth-child(2) {
                border-radius: 0 0 15px 0;
                color: red;
            }
        }
    }

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 50%;
    top: 50%;
    width: 350px;
    height: 200px;
    background-color: #ffffff;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    border-radius: 10px;

    .top {
        p {
            margin-top: 75px;
            font-size: 16px;
        }
    }

}

.cancel {
    position: absolute;
    right: 10px;
    bottom: 20px;
}

.commentitem {
    margin-top: 10px;
    background-color: #fff;


    .commentdetail {
        display: flex;
        padding-bottom: 10px;
        position: relative;

        .userinfo {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left: 10px;
            padding: 0;
            border-bottom: 1px solid gainsboro;

            .name {
                p {
                    font-size: 14px;
                }

                span {
                    font-size: 12px;
                    color: gray;
                }
            }

            .content {
                margin-top: 10px;
                padding-bottom: 10px;

                p {
                    font-size: 13px;
                }
            }
        }

        .userpho {
            width: 30px;
            height: 30px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
        }

        .goods {
            position: absolute;
            right: 0;
            top: 0px;

            span {
                font-size: 20px;

                &:nth-child(2) {
                    font-size: 14px;
                    position: relative;
                    bottom: 1px;
                }

                &:nth-child(1) {
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    position: relative;
                    bottom: -3px;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}

.staractive {
    color: yellow;
}



.likeactive {
    color: red;
}

.like {
    color: rgb(199, 190, 190);
}

::-webkit-input-placeholder {
    color: rgb(148, 139, 139);
}

.fotter {
    right: 0;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 15px 15px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    box-sizing: border-box;

    input {
        padding: 10px;
        border-radius: 999px;
        outline: none;
        border: 0;
        background-color: #f7f7fb;
    }
}

.contentbox {
    padding-bottom: 20px;

    h1 {
        margin-top: 20px;
        font-weight: bold;
    }

    p {
        margin-top: 30px;
        font-size: 16px;
    }

    img {
        margin-top: 20px;
        width: 100%;
    }
}


.userinfo {
    padding: 20px 0px;
    display: flex;
    flex-direction: column;



    .userdetail {

        display: flex;
        align-items: center;

        .user {
            p {
                color: #cccccc;

                &:nth-child(1) {
                    color: #ffffff;
                    background-color: #ff8a1f;
                    text-align: center;
                    border-radius: 5px;
                    font-size: 13px;
                    padding: 2px 15px;
                }
            }
        }



        .name {
            flex: 1;
            margin-left: 10px;


            p {
                display: flex;
                align-items: center;

                &:nth-child(2) {
                    font-size: 13px;
                    color: #999999;
                }

                span {
                    &:nth-child(1) {
                        margin-left: 10px;
                        display: inline-block;
                        width: 15px;
                        height: 15px;
                        background-image: url(https://www.sonkwo.cn/a0002f8a9ae35087df211c43dbb6a263.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        line-height: 15px;
                        position: relative;
                        top: 2px;
                    }

                    &:nth-child(2) {
                        font-size: 12px;
                        margin-left: 5px;
                        color: #ebd4a9;
                        padding: 2px;
                        border: 1px solid #ebd4a9;
                    }

                }
            }
        }

        .imgbox {
            display: flex;
            position: relative;

            img {
                &:nth-child(1) {
                    position: relative;
                    z-index: 2;
                }

                &:nth-child(2) {
                    position: absolute;
                    top: 13px;
                    right: 14px;
                    border-radius: 999px;
                }
            }
        }

    }
}

.title {
    position: relative;
    z-index: 2;
    display: flex;
    background-color: #ffffff;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    color: #222222;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 2;
    top: 0;
    border-bottom: 2px solid #f7f7fb;

    .back {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;

            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    .gamename {
        flex: 1;
        // text-align: center;
        margin-left: 30px;
        font-size: 17px;
    }

    .more {
        span {
            font-size: 17px;
        }
    }



}
</style>

<script>

import { Toast } from 'vant'
import { headLineDetail } from '../api/headLineDetali'
export default {
    data() {
        return {
            commentId: null,
            showDialog: false,
            showShare: false,//分享面板
            starLike: false,//星标
            likeLike: false,//爱心
            titleId: this.$route.query.id,//当前文章id
            value: '',//文本框内容
            commentList: JSON.parse(localStorage.getItem('commentList')) || [],//所有评论
            goodList: JSON.parse(localStorage.getItem('goodList')) || [],//点赞列表
            pageComment: [],//当页的评论
            userName: JSON.parse(localStorage.getItem('token')).phone,
            detailContent: null,
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
        }
    }, methods: {
        starColor() {
            this.starLike = !this.starLike//颜色取反
        },
        like() {
            this.goodList.push(this.titleId * 1)
            window.localStorage.setItem('goodList', JSON.stringify(this.goodList))//改变数组，从而双层互动
        },
        unlike() {
            let index = this.goodList.findIndex(item => {
                return item === this.titleId
            })
            this.goodList.splice(index, 1)
            window.localStorage.setItem('goodList', JSON.stringify(this.goodList))//改变数组，从而双层互动
        }, publish() {
            if (this.value.trim() == '') {
                Toast('请勿发送空评论')
                this.value = ''
            } else {
                Toast('发表评论成功')
                // 发表评论的时候，将内容，时间，文章id存入
                this.pageComment.push({ titleId: this.titleId, comment: this.value, time: new Date().toLocaleString() })
                this.commentList.push({ titleId: this.titleId, comment: this.value, time: new Date().toLocaleString() })
                window.localStorage.setItem('commentList', JSON.stringify(this.commentList))
                this.value = ''
            }

        }, good() {
            Toast('不能给自己的评论点赞')
        },
        delDetail(time) {
            this.showDialog = true
            this.commentId = time
            // 根据发表时间删除评论，正常来说是按照id的。

        },
        cancel() {
            this.showDialog = false
        },
        del() {
            this.showDialog = false
            let index = this.pageComment.findIndex(data => {
                return data.time == this.commentId
            })
            this.pageComment.splice(index, 1)

            window.localStorage.setItem('commentList', JSON.stringify(this.pageComment))
            Toast('删除成功')
        }, toComment() {
            let scrollElem = this.$refs.scrollDiv;

            window.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
        }, headLineDetail() {
            headLineDetail().then(data => {
                console.log(data.result.newslist);
                for (var i in data.result.newslist) {
                    if (data.result.newslist[i].id == this.$route.query.id) {
                        this.detailContent = data.result.newslist[i]
                    }
                }
                console.log(this.detailContent);
            })
        }
    }, created() {
        let arr = JSON.parse(localStorage.getItem('commentList')) || []
        arr.forEach(item => {
            if (item.titleId == this.$route.query.id) {
                this.pageComment.push(item)
            }
        }), this.headLineDetail()

    }
}
</script>